<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <script type="text/javascript" src="res/jquery/jquery-1.11.1-min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        @import url('https://rsms.me/inter/inter.css');

        :root {
            --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
        }

        body {
            font-feature-settings: "cv03", "cv04", "cv11";
        }

        .datagrid-title{
            color:darkorange;font-size:15px;
        }
    </style>
</head>
<body>
<script src="${pageContext.request.contextPath}/res/js/demo-theme.js"></script>


<script type="text/javascript">

    function getUserInfo(){

        $.ajax({
            url:'dev/user/getUserInfoTransport',
            type:'get',
            dataType:'json',
            success:data => {
                if(data.data == null){
                    $("#username_user").text(data.user.username)
                    $("#number_user").text(data.user.number)
                }else{
                    alert(data.data)
                    window.location.href='toLogin'
                }
            }
        })

        $.ajax({
            url:'dev/user/getUserInfoTransport',
            type:'post',
            dataType:'json',
            success:data => {
                console.log("data",data)
                if(data.data == null){
                    $("#username").val(data.user.username)
                    $("#number").val(data.user.number)
                    $("#company").val(data.user.company)
                    $("#address").val(data.user.address)
                    $("#email").val(data.user.email)
                    $("#edit-id").val(data.user.id)
                }else{
                    alert(data.data)
                    window.location.href='toLogin'
                }
            }
        })
    }

    $(function (){
        window.onload = getUserInfo

        /**
         * 进行注册信息数据校验 判断数据是否规范
         */
        $("#number").blur(function (){
            var phoneReg = new RegExp(/0?(13|14|15|18|17)[0-9]{9}/);
            if(!phoneReg.test($.trim($("#number").val()))){
                $("#phoneMsg").html('请输入有效手机号');
            }else{
                $("#phoneMsg").html('');
            }
        })

        $("#email").blur(function (){
            var emailReg = new RegExp(/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/);
            if(!emailReg.test($.trim($("#email").val()))){
                $("#emailMsg").html('请输入有效的邮箱');
            }else{
                $("#emailMsg").html('');
            }
        })

        $("#company").blur(function (){
            if($.trim($("#company").val()) == null || $.trim($("#company").val()) === ''){
                $("#companyMsg").html('所属公司不能为空');
            }else{
                $("#companyMsg").html('');
            }
        })
        $("#username").blur(function (){
            if($.trim($("#username").val()) == null || $.trim($("#username").val()) === ''){
                $("#usernameMsg").html('用户名不能为空');
            }else{
                $("#usernameMsg").html('');
            }
        })


        $("#oldPwd").blur(function (){
            if($.trim($("#oldPwd").val()) == null || $.trim($("#oldPwd").val()) === ''){
                $("#oldPwdMsg").html('旧密码不能为空');
            }else{
                $("#oldPwdMsg").html('');
            }
        })
        $("#newPwd").blur(function (){
            if($.trim($("#newPwd").val()) == null || $.trim($("#newPwd").val()) === ''){
                $("#newPwdMsg").html('新密码不能为空');
            }else{
                $("#newPwdMsg").html('');
            }
        })
        $("#surePwd").blur(function (){
            if($.trim($("#surePwd").val()) == null || $.trim($("#surePwd").val()) === ''){
                $("#surePwdMsg").html('旧密码不能为空');
            }else if($.trim($("#newPwd").val()) != $.trim($("#surePwd").val())){
                $("#surePwdMsg").html('新密码与确认密码必须相同');
            } else{
                $("#surePwdMsg").html('');
            }
        })


        /**
         * 修改密码
         */
        $("#updatePwdBtn").click(function (){


            var id = $.trim($("#edit-id").val());
            var oldPwd = $.trim($("#oldPwd").val());
            var newPwd = $.trim($("#newPwd").val());

            var params = {id,oldPwd,newPwd}

            if($("#oldPwdMsg").html() != '' ||
                $("#newPwdMsg").html() != '' ||
                $("#surePwdMsg").html() != ''){
                alert("请根据红字提示完成注册信息填写！")
                return;
            }else{
                $.ajax({
                    url:'dev/user/updatePwdById',
                    data: params,
                    type:'post',
                    dataType:'json',
                    success: data => {
                        console.log("aaaaaa",data)
                        alert(data.data)
                    }
                })
            }

        })


        /**
         * 修改用户信息
         */
        $("#updateInfoBtn").click(function (){


            var id = $.trim($("#edit-id").val());
            var username = $.trim($("#username").val());
            var number = $.trim($("#number").val());
            var company = $.trim($("#company").val());
            var address = $.trim($("#address").val());
            var email = $.trim($("#email").val());

            var user = {id,username,number,company,address,email}

             if($("#usernameMsg").html() != '' ||
                $("#phoneMsg").html() != '' ||
                $("#companyMsg").html() != '' ||
                $("#emailMsg").html() != ''){
                alert("请根据红字提示完成注册信息填写！")
                return;
            }else{
                 $.ajax({
                     url:'dev/user/update',
                     contentType: "application/json;charset=UTF-8",
                     data: JSON.stringify(user),
                     type:'post',
                     dataType:'json',
                     success: data => {
                         window.location.href = 'toUserInfoTransport'
                     }
                 })
             }

        })

    })

</script>

<div class="page-wrapper">
    <!-- Navbar -->
    <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
            <!--LOGO-->
            <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
                <a href="toUserInfoTransport">
                    <img src="${pageContext.request.contextPath}/res/images/index-logo-t.png" width="110" height="32" alt="Tabler" class="navbar-brand-image">
                </a>
            </h1>
            <div class="navbar-nav flex-row order-md-last">
                <div class="d-none d-md-flex">
                    <!--月亮-->
                    <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode"
                       data-bs-toggle="tooltip"
                       data-bs-placement="bottom">
                        <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                             stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"/>
                        </svg>
                    </a>
                    <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
                       data-bs-placement="bottom">
                        <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
                    </a>
                    <!--消息-->
                    <div class="nav-item dropdown d-none d-md-flex me-3">
                        <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1"
                           aria-label="Show notifications">
                            <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"/>
                                <path d="M9 17v1a3 3 0 0 0 6 0v-1"/>
                            </svg>
                            <span class="badge bg-red"></span>
                        </a>
                    </div>
                </div>
                <!--头像-->
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
                       aria-label="Open user menu">
                        <span class="avatar avatar-sm" style="background-image: url(${pageContext.request.contextPath}/res/images/000m.jpg)"></span>
                        <div class="d-none d-xl-block ps-2">
                            <div id="username_user">张XX</div>
                            <div id="number_user" class="mt-1 small text-muted">ID:15966565881</div>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                        <a href="toUserInfoTransport" class="dropdown-item">个人资料</a>
                        <a href="logOutTransport" class="dropdown-item">退出登录</a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <header class="navbar-expand-md">
        <div class="collapse navbar-collapse" id="navbar-menu">
            <div class="navbar navbar-light">
                <div class="container-xl">
                    <ul class="navbar-nav">
                        <li class="nav-item" >
                            <a class="nav-link" href="toTransport">
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clipboard-text"
                             width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                             fill="none" stroke-linecap="round" stroke-linejoin="round">
                           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                           <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
                           <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
                           <path d="M9 12h6"></path>
                           <path d="M9 16h6"></path>
                        </svg>
                    </span>
                                <span class="nav-link-title">
                      拼单发布
                    </span>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link" href="toListQueryTransport">
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list-search"
                           width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                           stroke-linecap="round" stroke-linejoin="round">
                           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                           <path d="M15 15m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
                           <path d="M18.5 18.5l2.5 2.5"></path>
                           <path d="M4 6h16"></path>
                           <path d="M4 12h4"></path>
                           <path d="M4 18h4"></path>
                      </svg>
                    </span>
                                <span class="nav-link-title">
                      智能查询
                    </span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="toMyReleaseTransport">
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ad-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                       <path d="M11.933 5h-6.933v16h13v-8"></path>
                       <path d="M14 17h-5"></path>
                       <path d="M9 13h5v-4h-5z"></path>
                       <path d="M15 5v-2"></path>
                       <path d="M18 6l2 -2"></path>
                       <path d="M19 9h2"></path>
                      </svg>
                    </span>
                                <span class="nav-link-title">
                      我的发布
                    </span>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link" href="toOrderManagementTransport">
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-books" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                       <path d="M5 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
                       <path d="M9 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
                       <path d="M5 8h4"></path>
                       <path d="M9 16h4"></path>
                       <path d="M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041z"></path>
                       <path d="M14 9l4 -1"></path>
                       <path d="M16 16l3.923 -.98"></path>
                     </svg>
                    </span>
                                <span class="nav-link-title">
                      我发的单
                    </span>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link" href="toManagementTransportElse">
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-books" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                       <path d="M5 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
                       <path d="M9 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
                       <path d="M5 8h4"></path>
                       <path d="M9 16h4"></path>
                       <path d="M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041z"></path>
                       <path d="M14 9l4 -1"></path>
                       <path d="M16 16l3.923 -.98"></path>
                     </svg>
                    </span>
                                <span class="nav-link-title">
                      我拼的单
                    </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <!-- Page header -->
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        用户信息修改
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <!-- Page body -->
    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="row g-0">
                    <div class="col d-flex flex-column">
                        <div class="card-body">
                            <h2 class="mb-4">我的账户</h2>
                            <h3 class="card-title">基本信息</h3>
                            <div class="row align-items-center">
                                <div class="col-auto"><span class="avatar avatar-xl" style="background-image: url(${pageContext.request.contextPath}/res/images/000m.jpg)"></span></div>
                            </div>
                            <br/>
                            <div class="row g-3">
                                <%--隐藏域id--%>
                                <input type="hidden" id="edit-id">
                                <div class="col-md">
                                    <div class="form-label required">用户名
                                        <span id="usernameMsg" style="color: red"></span>
                                    </div>
                                    <input id="username" type="text" class="form-control">
                                </div>
                                <div class="col-md">
                                    <div class="form-label required">手机号
                                        <span id="phoneMsg" style="color: red"></span>
                                    </div>
                                    <input id="number" type="text" class="form-control">
                                </div>
                                <div class="col-md">
                                    <div class="form-label required">所属公司
                                        <span id="companyMsg" style="color: red"></span>
                                    </div>
                                    <input id="company" type="text" class="form-control">
                                </div>
                            </div>
                            <br/>
                            <div class="row g-2">
                                <div class="col-md">
                                    <div class="form-label">公司所在地址</div>
                                    <input id="address" type="text" class="form-control">
                                </div>
                                <div class="col-md">
                                    <div class="form-label required">邮箱
                                    <span id="emailMsg" style="color: red"></span>
                                    </div>
                                    <input id="email" type="text" class="form-control">
                                </div>
                            </div>
                            <h3 class="card-title mt-4">密码</h3>
                            <div>
                                <button  class="btn btn-primary" data-bs-toggle="modal"
                                         data-bs-target="#modal-report" _msttexthash="14020526" _msthash="143" style="background-color:darkorange">修改密码</button>
                            </div>
                        </div>

                        <div class="card-footer bg-transparent mt-auto">
                            <div class="btn-list justify-content-end">
                                <a href="#" class="btn">
                                    取消
                                </a>
                                <button id="updateInfoBtn" class="btn btn-primary" style="background-color:darkorange">
                                    提交
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%--修改密码密码模态框--%>
<div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改密码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container-xl">
                    <div class="row row-cards">
                        <!--托运拼单-->
                        <div class="col-lg-12">
                            <div class="row row-cards">
                                <div class="col-12">
                                    <form class="card">
                                        <div class="card-body">
                                            <div class="row row-cards">
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label required">旧密码
                                                        <span id="oldPwdMsg" style="color:red;"></span>
                                                        </label>
                                                        <input id="oldPwd" type="password" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label required">新密码
                                                            <span id="newPwdMsg" style="color:red;"></span>
                                                        </label>
                                                        <input id="newPwd" type="password" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label required">确认密码
                                                            <span id="surePwdMsg" style="color:red;"></span>
                                                        </label>
                                                        <input id="surePwd" type="password" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer text-center">
                                            <a id="updatePwdBtn" class="btn btn-primary" data-bs-dismiss="modal">提交</a>

                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/res/js/tabler.js" defer></script>
<script src="${pageContext.request.contextPath}/res/js/demo.js" defer></script>

</body>
</html>
